//Vue.js 练习

//1、创建一个Vue实例
var vm = new Vue({
	//选项对象
	data:{
		a: 1
	},
	
	//实例生命周期
	created:function(){
		// 'this' 指向 vm 实例
		console.log('a is: ' + this.a)
	},
	
	mounted:function(){
		console.log('mounted')
	},
	
	updated:function(){
		console.log('updated')
	},
	
	destroyed:function(){
		console.log('destroyed')
	}
});


//2、数据与方法
/*当一个Vue实例被创建时，它向 Vue 的响应式系统中加入其 data 对象中能长到的所有属性。*/

//我们的数据对象
var data = {a: 1}
//该对象被加入到一个Vue实例中
var vm1 = new Vue({
	data:data
})

//获得这个实例上的属性
//返回源数据中对应的字段
vm1.a == data.a     // => true

//设置属性也会影响到原始数据
vm1.a = 2
data.a    //   => 2

// 反之亦然
data.a = 3
vm1.a    //  => 3

/**
 * 注：只有当实例被创建时 data 中存在的属性才是响应式的。
 */

/**
 *  使用 Object.freeze() 会阻止修改现有属性，也意味着响应系统无法再追踪变化。
 */
var obj = {
	foo:'bar'
}

Object.freeze(obj)

new Vue({
	el:'#app',
	data:obj
})

/**
 * 文本：数据绑定最常见的形式就是使用”Mustache“语法（双大括号）的文本插值。
 * 无论何时，绑定的数据对象上 msg 属性发了改变，插值处的内容都会更新。
 * html代码：
 * <span>Message: {{ msg }}</span>
 * 
 * 通过使用 v-once 指令，执行一次性地插值，数据改变时，插值处也不会改变
 * html代码：
 * <span v-once>这个将不会改变：{{ msg }}</span>
 */

//////////////
//特性
var vm2 = new Vue({
	el:'#app',
	data:{
		isButtonDisabled:false
	}
})

//////////////////////
//#动态参数
/**
 * 从2.6.0开始，可以用方括号“[]”括起来的 JavaScript 表达式作为一个指令的参数：
 * <a v-bind:[attributeName]="url"> ... </a>
 * attributeName 会被作为一个 JaveScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。
 * 如：attributeName 的值为 “href”，那么这个绑定等价于 v-bind:href.
 * 
 * --------------------------------
 * 用动态参数为一个动态事件名绑定处理函数：
 * <a v-on:[eventName]="doSomething"> ... </a>
 * 同样的，当 eventName 的值为 “focus” 时， v-on:[eventName] 等价于 v-on:focus.
 * 
 */


////////////////////////////////
//#修饰符（modifier）
/**
 * 以 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
 * 如：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
 */
